<template>
  <div class="delete-container">
    <h2>删除用户</h2>
    <el-form @submit.native.prevent="deleteUser" class="delete-form">
      <el-form-item label="用户ID" :label-width="'100px'">
        <el-input
            v-model="userId"
            type="text"
            placeholder="请输入用户ID"
            class="input-field"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="danger" round native-type="submit" class="submit-btn">
          删除用户
        </el-button>
        <el-button type="default" round @click="reset" class="reset-btn">
          重置
        </el-button>
      </el-form-item>
    </el-form>
    <p v-if="deleteFailed" class="error-message">{{ errorMessage }}</p>
    <p v-if="deleteSuccess" class="success-message">用户删除成功！</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import axios from 'axios';

const userId = ref('');
const deleteSuccess = ref(false);
const deleteFailed = ref(false);
const errorMessage = ref('');

// 删除用户函数
const deleteUser = async () => {
  if (!userId.value.trim()) {
    errorMessage.value = '用户ID不能为空！';
    deleteFailed.value = true;
    deleteSuccess.value = false;
    return;
  }

  const requestBody = { id: userId.value };

  try {
    const response = await axios.delete('http://localhost:8220/yyds/api/User/delete', {
      data: requestBody,
      headers: { 'Content-Type': 'application/json' },
    });

    if (response.data && response.data.success) {
      deleteSuccess.value = true;
      deleteFailed.value = false;
    } else {
      errorMessage.value = response.data.message || '删除失败，请稍后重试。';
      deleteFailed.value = true;
      deleteSuccess.value = false;
    }
  } catch (error) {
    console.error('删除请求失败:', error);
    errorMessage.value = error.response?.data?.message || '网络错误，请稍后再试。';
    deleteFailed.value = true;
    deleteSuccess.value = false;
  }
};

// 重置表单
const reset = () => {
  userId.value = '';
  deleteSuccess.value = false;
  deleteFailed.value = false;
  errorMessage.value = '';
};
</script>

<style scoped>
/* 背景渐变效果 */
body {
  margin: 0;
  padding: 0;
  background: linear-gradient(135deg, #ff7675, #d63031);
  font-family: 'Arial', sans-serif;
  color: white;
  overflow: hidden; /* 防止滚动条 */
}

/* 容器居中并优化对齐 */
.delete-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.6); /* 半透明背景 */
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  animation: fadeIn 1s ease-out;
}

/* 渐变标题 */
h2 {
  font-size: 2rem;
  background: linear-gradient(90deg, #ff7675, #d63031);
  -webkit-background-clip: text;
  color: transparent;
  text-align: center;
  margin-bottom: 30px;
  animation: slideIn 0.8s ease-out;
}

/* 表单的样式 */
.delete-form {
  width: 350px;
  padding: 30px;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  animation: fadeInUp 1s ease-out;
}

/* 输入框样式 */
.input-field {
  width: 100%;
  margin-bottom: 20px;
  padding: 12px;
  border-radius: 6px;
  border: 1px solid #ddd;
  transition: all 0.3s ease;
}

.input-field:focus {
  border-color: #ff7675;
  box-shadow: 0 0 10px rgba(255, 118, 117, 0.5);
}

/* 按钮样式 */
.el-button {
  width: 120px;
  margin: 10px;
  padding: 12px;
  border-radius: 4px;
  font-weight: bold;
  transition: all 0.3s ease;
}

/* 提交按钮样式 */
.submit-btn {
  background-color: #e74c3c;
  color: white;
  border: none;
}

.submit-btn:hover {
  background-color: #c0392b;
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.reset-btn {
  background-color: #95a5a6;
  color: white;
  border: none;
}

.reset-btn:hover {
  background-color: #7f8c8d;
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* 消息样式 */
.error-message {
  color: #e74c3c;
  font-size: 1rem;
  margin-top: 20px;
  animation: fadeInMessage 1s ease-out;
}

.success-message {
  color: #2ecc71;
  font-size: 1rem;
  margin-top: 20px;
  animation: fadeInMessage 1s ease-out;
}

/* 动画效果 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInMessage {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .delete-form {
    width: 90%;
  }
}
</style>
